<template>
  <div class="app-container">
    <div>
      <el-form ref="form" :model="QueryForm">
        <el-form-item label="项目名称：" label-width="100px" style="width: 300px; float: left">
          <el-input clearable v-model="QueryForm.Keyword" placeholder="请输入项目名称"></el-input>
        </el-form-item>
      </el-form>
      <el-button style="margin-left:40px" type="primary" @click="getdata('search')">搜索</el-button>
    </div>
    <el-table header-cell-class-name="tableheader" element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)" v-loading="Loading" border fit element-loading-text="加载中···"
      highlight-current-row class="lefttable" :data="data">
      <el-table-column prop="projectName" label="项目名称"></el-table-column>
      <el-table-column prop="new_Name" label="APP名称"></el-table-column>
      <el-table-column prop="new_Version" label="版本号"></el-table-column>
      <el-table-column prop="upload_Time" label="上传时间"></el-table-column>
      <el-table-column prop="remark" label="APP备注"></el-table-column>
      <el-table-column label="操作" width="600px">
        <template slot-scope="scope">
          <el-button type="primary" @click="project(scope.row)">项目详情
          </el-button>
          <el-button type="primary" @click="upapp(scope.row)">上传APP
          </el-button>
          <el-button type="primary" @click="appinformation(scope.row)">APP版本信息
          </el-button>
          <el-button type="primary" @click="appupdateinstructions(scope.row)">APP更新说明
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="项目详情" :append-to-body="true" :close-on-click-modal="false" :show-close="false"
      :visible.sync="projectdalog" width="40%">
      <el-form ref="projectform" :rules="projectrule" :model="projectform" label-width="90px">
        <el-form-item prop="projectName" label="项目名称:">
          <el-input disabled v-model="projectform.projectName"></el-input>
        </el-form-item>
        <el-form-item prop="id" label="项目ID:">
          <el-input disabled v-model="projectform.id"></el-input>
        </el-form-item>
        <el-form-item prop="projectTime" label="项目时间:">
          <el-date-picker style="float: left; width: 46%" v-model="projectform.projectTime" format="yyyy-MM-dd"
            value-format="yyyy-MM-dd" clearable type="date" placeholder="请选择项目时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="developer" label="APP开发人员:">
          <el-input v-model="projectform.developer"></el-input>
        </el-form-item>
        <el-form-item prop="des" label="项目说明:">
          <el-input v-model="projectform.des" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="projectdalog = false">取消</el-button>
        <el-button type="primary" @click="projectbtn">保存</el-button>
      </span>
    </el-dialog>
    <el-dialog title="上传APP" :append-to-body="true" :close-on-click-modal="false" :show-close="false"
      :visible.sync="upappdalog" width="40%">
      <el-form ref="upappform" :rules="upapprule" :model="upappform" label-width="90px">
        <el-form-item prop="Name" label="APP名称:">
          <el-input v-model="upappform.Name"></el-input>
        </el-form-item>
        <el-form-item prop="Version" label="版本号:">
          <el-input v-model="upappform.Version"></el-input>
        </el-form-item>
        <el-form-item prop="UpdateRemark" label="版本更新说明:">
          <el-input v-model="upappform.UpdateRemark"></el-input>
        </el-form-item>
        <el-form-item prop="remark" label="APP备注:">
          <el-input v-model="upappform.remark"></el-input>
        </el-form-item>
        <el-form-item prop="DownloadUrl" label="APP文件:">
          <el-upload ref="uploadapp" class="upload-demo"
            :action="this.$master+'/tools/UploadRK?type=app'" :on-success="upsuccess"
            :on-error="uperrpr" :on-exceed="upexceed" accept=".apk" :limit="1">
            <el-button size="small" class="moremchbtn" type="primary">点击上传
            </el-button>
            <div slot="tip" class="el-upload__tip">只能上传apk文件</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="upappdalog = false">取消</el-button>
        <el-button type="primary" @click="upappbtn">保存</el-button>
      </span>
    </el-dialog>
    <el-dialog title="APP版本信息" :append-to-body="true" :close-on-click-modal="false" :visible.sync="appinformationdalog"
      width="40%">
      <el-table header-cell-class-name="tableheader" element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)" v-loading="Loading" border fit element-loading-text="加载中···"
        highlight-current-row class="lefttable" :data="appinformationdata" style="min-height: 150px">
        <el-table-column prop="version" label="APP版本"></el-table-column>
        <el-table-column label="APP文件">
          <template slot-scope="scope">
            <div @click="download(scope.row)" style="cursor: pointer">
              {{ scope.row.name }}(点击下载)
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="APP更新说明" :append-to-body="true" :close-on-click-modal="false"
      :visible.sync="appupdateinstructionsdalog" width="40%">
      <div style="margin-bottom: 15px; padding: 0 10px" v-for="item in appinformationdata">
        <p style="font-size: 18px">{{ item.version }}</p>
        <p style="font-size: 18px">{{ item.updateRemark }}</p>
      </div>
    </el-dialog>
    <div class="pagination">
      <el-pagination style="text-align: center" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="QueryForm.page" :page-size="QueryForm.pagesize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    activated() {
      this.getdata();
    },
    created() {
      this.getdata();
    },
    data() {
      return {
        Loading: true,
        QueryForm: {
          IsPage: true,
          page: 1,
          pagesize: 10,
          Keyword: ''
        },
        projectform: {},
        upappform: {},
        projectdalog: false,
        upappdalog: false,
        appinformationdalog: false,
        appinformationdata: [],
        appupdateinstructionsdalog: false,
        projectrule: {
          projectName: [{
            required: true,
            message: "此项为必填项"
          }],
          id: [{
            required: true,
            message: "此项为必填项"
          }],
          projectTime: [{
            required: true,
            message: "此项为必填项"
          }],
          developer: [{
            required: true,
            message: "此项为必填项"
          }],
          des: [{
            required: true,
            message: "此项为必填项"
          }],
        },
        upapprule: {
          Name: [{
            required: true,
            message: "此项为必填项"
          }],
          Version: [{
            required: true,
            message: "此项为必填项"
          }],
          UpdateRemark: [{
            required: true,
            message: "此项为必填项"
          }],
          remark: [{
            required: true,
            message: "此项为必填项"
          }],
          DownloadUrl: [{
            required: true,
            message: "此项为必填项"
          }],
        },
        rule: {
          length: [{
            required: true,
            message: "此项为必填项"
          }],
        },
        data: [],
        total: 0,
      };
    },
    methods: {
      getdata(msg) {
        if (msg == 'search') {
          this.QueryForm.page = 1
        }
        this.$pcpost(
          this.$master + "/AppUpdate/Get_AppProject_List",
          this.QueryForm
        ).then((data) => {
          this.Loading = false;
          if (data.code === 0) {
            this.data = data.data.rows;
            this.total = data.data.total;
          }
        });
      },
      project(item) {
        this.projectdalog = true;
        this.$pcpost(this.$master + "/AppUpdate/Get_AppProject_Model", {
          id: item.id,
        }).then((data) => {
          if (data.code === 0) {
            this.projectform = data.data.appversion_model;
          }
        });
      },
      projectbtn() {
        this.$refs["projectform"].validate((valid) => {
          if (valid) {
            this.$pcpost(
              this.$master + "/AppUpdate/Edit_AppProject",
              this.projectform
            ).then((data) => {
              if (data.code === 0) {
                this.$notify.success({
                  title: "成功",
                  message: data.msg,
                });
                this.getdata();
                this.projectdalog = false;
              } else {
                this.$notify.error({
                  title: "失败",
                  message: data.msg,
                });
              }
            });
          }
        });
      },
      upapp(item) {
        this.upappdalog = true;
        this.upappform.AppProject_id = item.id;
      },
      upappbtn() {
        this.$refs["upappform"].validate((valid) => {
          if (valid) {
            this.$pcpost(
              this.$master + "/AppUpdate/Save_AppVersion",
              this.upappform
            ).then((data) => {
              if (data.code === 0) {
                this.$notify.success({
                  title: "成功",
                  message: data.msg,
                });
                this.getdata();
                this.upappdalog = false;
                this.upappform = {};
                this.$refs["uploadapp"].clearFiles();
              } else {
                this.$notify.error({
                  title: "失败",
                  message: data.msg,
                });
              }
            });
          }
        });
      },
      appinformation(item) {
        this.appinformationdalog = true;
        this.$pcpost(this.$master + "/AppUpdate/Get_App_List", {
          AppProject_Id: item.id,
        }).then((data) => {
          if (data.code === 0) {
            this.appinformationdata = data.data.data;
          }
        });
      },
      download(item) {
        console.log(item)
        var downloadUrl = item.downloadUrl.replace('http://120.78.219.34:8018', "https://rk.shouhuojiyun.com/master")
        console.log(downloadUrl);
        window.location.href = downloadUrl;
      },
      appupdateinstructions(item) {
        this.appupdateinstructionsdalog = true;
        this.$pcpost(this.$master + "/AppUpdate/Get_App_List", {
          AppProject_Id: item.id,
        }).then((data) => {
          if (data.code === 0) {
            this.appinformationdata = data.data.data;
          }
        });
      },
      upsuccess(item) {
        if (item.code === 0) {
          this.$notify({
            title: "成功",
            message: "成功",
            type: "success",
          });
          this.upappform.DownloadUrl = item.data.url;
          this.upappform.md5 = item.data.info.MD5;
          this.upappform.Crc32 = item.data.info.Crc32;
        } else {
          this.$notify.error({
            title: "失败",
            message: item.msg,
          });
        }
      },
      uperrpr() {
        this.$notify.error({
          title: "失败",
          message: "上传失败",
        });
      },
      upexceed() {
        this.$notify.error({
          title: "失败",
          message: "只能上传一个文件",
        });
      },
      handleSizeChange(v) {
        this.QueryForm.pagesize = v;
        this.getdata();
      },
      handleCurrentChange(v) {
        this.QueryForm.page = v;
        this.getdata();
      },
    },
  };

</script>

<style scoped>
  @media (max-width: 1366px) {
    .el-button+.el-button {
      margin: 10px 0 0 0;
    }
  }

</style>
